Figmaのマルチ編集機能の注意点とどこで使ってるかを紹介
2024.05.23こんにちは！デザイナーのくぼです！
2024年3月6日にリリースされた新機能、マルチ編集がリリースされてから約2ヶ月。
リリース当初はぼんやり便利そ〜くらいに思ってましたが、2ヶ月使用して感じた注意点とどこで使ってるのか紹介します！
以下のリンクはFigmaの公式の解説です。実際に手を動かしながらマルチ編集で何ができるのか学ぶことができます！
マルチ編集で同時編集できる要素は主に3つ
詳しい使い方は上記のプレイグラウンドや、「Figma マルチ編集機能」で検索するとわかりやすく解説してくれている記事が多数ありますので見てみてください。
マルチ編集機能は、簡単に言うと共通点のある要素を複数選択し、同時に編集することができる機能です。同時編集できる要素は主に以下の3つです。
①オブジェクト
キャンバスのフレーム全体、または複数のフレームで任意のオブジェクトを選択し、サイズの変更や整列、プロパティを同時に編集できます。
②テキスト
複数のテキストを同時に選択し、テキストの編集やテキストのプロパティを同時に編集できます。
③バリアント内のコンポーネント
バリアンツ内のコンポーネントの要素の追加や色変更ができます。
マルチ編集機能の注意点
共通の要素と認識してもらう条件が結構シビア
共通の階層に存在している、かつ同じ名前でないと共通の要素と認識されません。
オブジェクトについての一例を紹介します。
左端のフレームAの三角形(Triangle)を選択して、⌥⌘A (Mac)または Ctrl+Alt+A (Windows) でマルチ編集を使用した場合、共通の要素と認識されたのはBの要素(Triangle)のみです。
AとBは形は違いますが配置してある階層と名前(Triangle)が一致しているため、共通の要素と認識されています。このとき、レイヤーの順番は関係ありません。
Cは名前は一致しますが、オートレイアウトがかかっているため階層が違います。Dは階層は一致しますが、名前が違います。
このように、命名と階層を意識したデータ作りをしておかないと、マルチ編集を使ってページ内の要素を複数選択して編集した時に、「同じ要素なのにここだけ編集されていなかった！」「ここは違う要素だから編集されたら困るのに！」なんてことが起こりそうです。
影響範囲はあくまで同じページ内の為（親コンポーネントの編集を除く）他のページの要素も選択されてしまうことはないですが、1つのページ内にたくさん画面を作成している場合、マルチ編集機能で選択して一括編集するのは少し怖いな〜と個人的には思っています。
また、名前も階層も同じなのに何故か共通する要素がありませんと表示され使えないことがあります…。（私だけかもしれませんが）どういったケースで発生するのかはっきりさせられていないのであまり多用できないのが正直なところです…。
セクションをまたいだマルチ編集はできない
画面の遷移や状態の変化ごとにセクションで区切って管理している人も多いのではないかと思います。
マルチ編集機能はセクションをまたいだ一括選択はできません。その為セクションで細かく分けて管理している場合、セクションごとに編集する必要があります。
やはり複数の画面に使用する共通の要素はコンポーネント化して管理する一択かと！
マルチ編集機能の実際の使いどころ
オートレイアウトの入れ替え
状態変化を提示するために一部だけ異なるがほとんど同じ画面が並ぶケースは多いかと思います。
その中で、ここの画面の要素の順番を入れ変えることになった！という対応もありますよね。
そんなときに便利なのがマルチ編集機能です！！（ワー！パチパチ！）
簡単にご紹介します。以下の画面要素はそれぞれオートレイアウトがかかっており、写真、タイトル、本文の順に並んでいます。
左からデフォルト画面・タイトル編集状態画面・本文編集状態画面です。
タイトルを一番上にしよう！という変更が生じた場合でも一括で順番を変えられます。そう、マルチ編集機能ならね。
タイトルを一括選択 ( ⌥⌘A (Mac)または Ctrl+Alt+A (Windows) ) し、矢印キーで上へ。
はい！完了！すごい楽！
この組み合わせすらコンポーネント化するケースもあるかもしれませんが…私が実際作成しているデータは大体複数のコンポーネントをパーツとしてオートレイアウトで組む方式なので、順番を入れ替えたいときなどにマルチ編集機能が活躍してます！
一気にコンポーネント化、インスタンスに置き換え
検討段階で安易にコンポーネント化したくない…という考えを持っているのは私だけではないはず…！！安易なコンポーネント化は、似たようなコンポーネントの大量生産を招いてしまうかもしれません。
検討段階で制作したものをコンポーネント化して活用して時短したい！そんなときに使えます。
簡単にご紹介します。以下は、アートボード内に共通して使用している星のアイコンをコンポーネント化したいケースの紹介です。
先ほど同様、メインコンポーネントにしたい要素を選択( ⌥⌘A (Mac)または Ctrl+Alt+A (Windows) ) した状態でコンポーネント化します。（ショートカットキーは ⌥⌘K です。）
すると、アートボード外にメインコンポーネントが押し出され、選択していた要素はインスタンスに置き換わります。すごい！
「1画面だけかと思ったら複数画面で使うことになった！コンポーネント化しておけばよかった！」という場合に大活躍です。
ここでの注意点は、違う要素でも名前と階層が一緒だとすべてメインコンポーネントと同じ形のインスタンスに置き換わるという点です。怖
おわりに
マルチ編集機能の注意点と実際の使いどころを紹介しました。
あまりガシガシ活用できている訳ではありませんが、かゆいところに手が届くといった感じで便利なことに違いはありません！
マルチ編集機能で重要なのは命名とレイヤーの管理です。画面がどんどん増えていくと管理が大変ですが、最初のうちに命名ルールと構造管理をしっかり作っておくと後々の管理が楽になりますので意識していきたいところですね！
ご参考になれば幸いです！最後までお読みいただきありがとうございました！
